<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue监测数据改变的原理_数组</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <h2>名字：{{name}}</h2>
    <h2>地址：{{address}}</h2>
    <hr>
    <h1>学生信息</h1>
    <button @click="addSex">添加一个性别属性，默认值是男</button>
    <h2>姓名：{{student.name}}</h2>
    <h2 v-if="student.sex">性别：{{student.sex}}</h2>  
    <!-- {{student.sex}} sex没有定义，这里是不报错的，会不显示因为没有是undefined，undefined不会显示出来；
    如果未定义，vm._data.student.sex 手动添加并赋值，页面也不会显示出来 -->
    <h2>年龄：真实{{student.age.rAge}}, 对外{{student.age.sAge}}</h2>
    <h2>爱好</h2>
    <ul>
      <li v-for="(f, index) in student.friends" :key="index">
        {{f.name}} -- {{f.age}}
      </li>
    </ul>
    <h2>朋友们</h2>
    <ul>
      <li v-for="(h, index) in student.hobby" :key="index">
        {{h}}
      </li>
    </ul>
  </div>
  <script>
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示。
    const vm = new Vue({
      el: "#root",
      data: {
        name: '名字',
        address: '地址',
        student: {
          name: 'Tom',
          age: {
            rAge: 30,
            sAge: 18
          },
          hobby: ['喝酒','抽烟','烫头'],
          friends: [
            {name: 'Jerry', age: 31},
            {name: 'Tony', age: 32}
          ]
        }
      },
      methods: {
        addSex() {
          Vue.set(this.student, 'sex', '男')
        }
      },
    })
    // 用法：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')
    // 注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。 data _data
    // Vue.set(vm._data.student, 'sex', '男') => Vue.set(vm.student, 'sex', '男') 数据代理
    // vm.$set(vm.student, 'sex', '男')

    // Vue.set(vm._data.student.hobby, 1, '打台球')
    // vm._data.studeng.hobby.push === Array.prototype.push false vue对数组的操作先调用数组原型的push，再重新解析模板，，，更改原数组
  </script>
</body>
</html>